<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>canvas演示</title>
	</head>
	<body>
		<canvas id="myCanvas" width="300" height="300" style="border: solid 2px black;">
			您的浏览器不支持canvas,建议使用最新版的chrom
		</canvas>
		<script>
			var c= document.getElementById("myCanvas");
			var ctx=c.getContext("2d");
			ctx.fillStyle="#FF0000";//填充颜色
			ctx.fillRect(10,10,50,50);//填充坐标位置
			ctx.strokeStyle="blue";
			ctx.strokeRect(70,10,50,50);
			ctx.fillStyle="#666666";
			ctx.fillRect(10,90,50,50);
			ctx.strokeStyle="darkgray";
			ctx.strokeRect(70,90,50,50);
			ctx.fillStyle="forestgreen";
			ctx.fillRect(10,180,50,50);
			ctx.strokeStyle="#FF0000";
			ctx.moveTo(0,0);
			ctx.lineTo(150,100);
			ctx.stroke();
		</script>
	</body>
</html>
